<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/message.css">

</head>
<body>
    <div class="container">
        <div class="col-md-12" style="height: 20px"></div>

        <div class="col-md-8 col-md-offset-2" style="border: 1px solid black">
            <div class="col-md-12" style="height: 20px"></div>

            <!--剩余数目提示-->
            <label class="col-md-6" style="color: #555555;" id="numberTip"></label>
            <div class="col-md-12" style="height: 20px"></div>

            <div class="col-md-12" style="border-bottom: 1px solid black"></div>
            
            <!--显示贴吧情况列表-->
            <div class="col-md-12" id="postBarList"></div>
            <div class="col-md-12" style="height: 30px"></div>

            <!--显示翻页器-->
            <div class="row" nowPage="1" maxPage="1" maxDisplay="8" id="pageTurner">
                <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(-1, totalNum, getPagePostBar)">上一页</button>
                <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
                <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(1, totalNum, getPagePostBar)">下一页</button>
            </div>
            
            <div class="col-md-12" style="height: 20px"></div>
        </div>
        <div class="col-md-12" style="height: 30px"></div>
    </div>

    <script type="text/javascript">
        var totalNum;
        let postBarList = $("#postBarList");
        let numberTip = $("#numberTip");

        // 请求得到所有贴吧的数量
        $.get("/QG_PostBar/postBar?method=getAllPostBarForNumber", {"check": 1}, function (data) {
            totalNum = data;
            numberTip.html("待审核贴吧：" + totalNum + " 个");

            // 更新翻页器
            updatePageTurnerRoot(0, totalNum);
        });

        // 请求得到贴吧信息
        // 先自己来一次
        getPagePostBar();
        function getPagePostBar() {
            // 获取翻页器
            let pageTurner = $("#pageTurner");

            // 获取当前页数和最大显示数量
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            $.post("/QG_PostBar/postBar?method=getAllPostBarByPage", {"check": 1, "page": nowPage, "num": maxDisplay}, function (data){
                // 先清空列表
                postBarList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴吧对象，并添加进去
                    const postBar = data[key];
                    addPostBarItem(postBarList, postBar, finish);
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        // 每完成一次审核调用一次
        function finish() {
            totalNum--;
            numberTip.html("待审核贴吧：" + totalNum + " 个");

            // 更新翻页器数据，不翻页，不用更新数据
            updatePageTurnerRoot(0, totalNum, getPagePostBar);
        }

        /**
         * 负责更新翻页器数据（作用的对象是静态添加的翻页器，而不是动态添加的列表中的翻页器）
         * 获取到翻页器和显示标签、以及要显示的总量
         * 更新最大页数
         * 然后通过翻页标识、当前页数和最大页数判断如何执行翻页操作
         * @param turnPage 翻页标识（-1表示上一页，0表示不翻页，1表示下一页）
         * @param totalNum 目前翻页器对应列表的数据总条数
         * @param updatePage 作为回调函数，即发生翻页后调用来显示新的数据
         */
        function updatePageTurnerRoot(turnPage, totalNum, updatePage) {
            // 获取翻页器和显示标签
            let pageTurner = $("#pageTurner");
            let pageLabel = $("#pageLabel");

            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            // 计算最大页数
            let newMaxPage;
            if (totalNum === 0) {
                newMaxPage = 1
            } else {
                newMaxPage =  Math.floor((totalNum-1) / maxDisplay) + 1;
            }

            // 判断翻页标识
            let isTurn = false;
            if (nowPage+turnPage > 0 && nowPage+turnPage <= newMaxPage) {
                nowPage += turnPage;
                isTurn = true;
            }

            // 判断更新后的页数变化（可能执行了删除操作，导致当前页数小于最大页数，这时候要将当前页数改为最大页数）
            if (nowPage > newMaxPage) {
                nowPage = newMaxPage;
            }

            // 将新的数据显示出来
            pageLabel.html(nowPage + " / " + newMaxPage);

            // 将新的数据更新到翻页器中
            pageTurner.attr("nowPage", "" + nowPage);
            pageTurner.attr("maxPage", "" + newMaxPage);
            pageTurner.attr("maxDisplay", "" + maxDisplay);

            // 调用翻页函数
            if (updatePage !== undefined && isTurn) {
                updatePage();
            }
        }
    </script>
</body>
</html>